<template>
<div class="dashboard-container">
    <div class="dashboard-header">
        <h1>系统资源看板</h1>
        <p>实时监控各资源模块数据统计</p>
    </div>
    
    <el-row :gutter="20" class="stats-row">
        <el-col :span="6">
            <el-card shadow="hover" class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon sites">
                        <i class="el-icon-location"></i>
                    </div>
                    <div class="stat-info">
                        <div class="stat-number">{{ siteCount }}</div>
                        <div class="stat-label">景区资源</div>
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card shadow="hover" class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon hotels">
                        <i class="el-icon-house"></i>
                    </div>
                    <div class="stat-info">
                        <div class="stat-number">{{ hotelCount }}</div>
                        <div class="stat-label">民宿资源</div>
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card shadow="hover" class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon products">
                        <i class="el-icon-shopping-bag-1"></i>
                    </div>
                    <div class="stat-info">
                        <div class="stat-number">{{ productCount }}</div>
                        <div class="stat-label">美食资源</div>
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card shadow="hover" class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon activities">
                        <i class="el-icon-s-promotion"></i>
                    </div>
                    <div class="stat-info">
                        <div class="stat-number">{{ activityCount }}</div>
                        <div class="stat-label">活动资源</div>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>

    <el-row :gutter="20" class="stats-row">
        <el-col :span="6">
            <el-card shadow="hover" class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon lines">
                        <i class="el-icon-guide"></i>
                    </div>
                    <div class="stat-info">
                        <div class="stat-number">{{ lineCount }}</div>
                        <div class="stat-label">旅游线路</div>
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card shadow="hover" class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon ich">
                        <i class="el-icon-star-on"></i>
                    </div>
                    <div class="stat-info">
                        <div class="stat-number">{{ ichCount }}</div>
                        <div class="stat-label">非遗文化</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
        <el-col :span="6">
            <el-card shadow="hover" class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon users">
                        <i class="el-icon-user"></i>
                    </div>
                    <div class="stat-info">
                        <div class="stat-number">{{ userCount }}</div>
                        <div class="stat-label">注册用户</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
        <el-col :span="6">
            <el-card shadow="hover" class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon announcements">
                        <i class="el-icon-bell"></i>
                    </div>
                    <div class="stat-info">
                        <div class="stat-number">{{ annoumcenentCount }}</div>
                        <div class="stat-label">发布公告</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

    <el-row :gutter="20" class="charts-row">
        <el-col :span="12">
            <el-card shadow="hover" class="chart-card">
                <div slot="header" class="clearfix">
                    <span>最近订单信息</span>
                </div>
                <div class="orders-container">
                    <div class="order-list">
                        <div class="order-item" v-for="(order, index) in recentOrders" :key="index">
                            <div class="order-info">
                                <div class="order-user">{{ order.orderUser }}</div>
                                <div class="order-type">{{ order.orderType }}</div>
                                <div class="order-details">
                                    <span class="order-num">数量: {{ order.orderNum }}</span>
                                    <span class="order-price">¥{{ order.orderPrice }}</span>
                                </div>
                                <div class="order-date">{{ order.orderDate }}</div>
                            </div>
                        </div>
                        <div v-if="recentOrders.length === 0" class="no-orders">
                            暂无订单数据
                        </div>
                    </div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card shadow="hover" class="chart-card">
                <div slot="header" class="clearfix">
                    <span>用户反馈词云</span>
                </div>
                <div class="wordcloud-container">
                    <div id="wordcloud" style="width: 100%; height: 300px;"></div>
                </div>
            </el-card>
        </el-col>
    </el-row>
</div>
</template>

<script>
const axios = require('axios')
const qs = require('qs')
const ele = require('element-ui')
const echarts = require('echarts')
require('echarts-wordcloud')

export default {
    name: 'dashboard',
    data() {
        return {
            name: localStorage.getItem('userName'),
            // 资源统计数据
            siteCount: 0,
            hotelCount: 0,
            productCount: 0,
            activityCount: 0,
            lineCount: 0,
            ichCount: 0,
            userCount: 0,
            annoumcenentCount: 0,
            // 反馈数据
            feedbackData: '',
            // 最近订单数据
            recentOrders: []
        };
    },
    computed: {
        role() {
            return this.name = 'admin';
        }
    },
    created() {
        if (window.localStorage.getItem('userType') != 'admin') {
            ele.Message.error("你没有管理员权限访问后台，即将跳转到登录页面")
            this.$router.push('/login')
        }
        else {
            this.loadAllData();
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initCharts();
        });
    },
    methods: {
        // 加载所有数据
        loadAllData() {
            this.loadUserData();
            this.loadAnnouncementData();
            this.loadSiteData();
            this.loadHotelData();
            this.loadProductData();
            this.loadActivityData();
            this.loadLineData();
            this.loadIchData();
            this.loadFeedbackData();
            this.loadRecentOrders();
        },
        
        // 加载用户数据
        loadUserData() {
            axios({
            method: 'get',
            url: 'http://localhost:8080/getUserList',
                headers: { 'Content-type': 'application/x-www-form-urlencoded' }
            }).then(response => {
                this.userCount = response.data.userList.length;
            }).catch(error => console.log(error));
        },
        
        // 加载公告数据
        loadAnnouncementData() {
            axios({
            method: 'get',
            url: 'http://localhost:8080/getAnnouncementList',
                headers: { 'Content-type': 'application/x-www-form-urlencoded' }
            }).then(response => {
                this.annoumcenentCount = response.data.mesgList.length;
            }).catch(error => console.log(error));
        },
        
        // 加载景区数据
        loadSiteData() {
            axios({
                method: 'get',
                url: 'http://localhost:8080/getSiteList',
                headers: { 'Content-type': 'application/x-www-form-urlencoded' }
            }).then(response => {
                this.siteCount = response.data.dataList.length;
            }).catch(error => console.log(error));
        },
        
        // 加载民宿数据
        loadHotelData() {
            axios({
                method: 'get',
                url: 'http://localhost:8080/getHotelList',
                headers: { 'Content-type': 'application/x-www-form-urlencoded' }
            }).then(response => {
                this.hotelCount = response.data.dataList.length;
            }).catch(error => console.log(error));
        },
        
        // 加载美食数据
        loadProductData() {
            axios({
                method: 'get',
                url: 'http://localhost:8080/getProductList',
                headers: { 'Content-type': 'application/x-www-form-urlencoded' }
            }).then(response => {
                this.productCount = response.data.dataList.length;
            }).catch(error => console.log(error));
        },
        
        // 加载活动数据
        loadActivityData() {
            axios({
                method: 'get',
                url: 'http://localhost:8080/getActivityList',
                headers: { 'Content-type': 'application/x-www-form-urlencoded' }
            }).then(response => {
                this.activityCount = response.data.dataList.length;
            }).catch(error => console.log(error));
        },
        
        // 加载线路数据
        loadLineData() {
            axios({
                method: 'get',
                url: 'http://localhost:8080/getLineList',
                headers: { 'Content-type': 'application/x-www-form-urlencoded' }
            }).then(response => {
                this.lineCount = response.data.dataList.length;
            }).catch(error => console.log(error));
        },
        
        // 加载非遗数据
        loadIchData() {
            axios({
                method: 'get',
                url: 'http://localhost:8080/getIchList',
                headers: { 'Content-type': 'application/x-www-form-urlencoded' }
            }).then(response => {
                this.ichCount = response.data.dataList.length;
            }).catch(error => console.log(error));
        },
        
        // 加载反馈数据
        loadFeedbackData() {
            axios({
                method: 'get',
                url: 'http://localhost:8080/getAllFeedbackForWordCloud',
                headers: { 'Content-type': 'application/x-www-form-urlencoded' }
            }).then(response => {
                if (response.data.status === 'success') {
                    this.feedbackData = response.data.data || '';
                    this.$nextTick(() => {
                        this.initWordCloud();
                    });
                }
            }).catch(error => console.log(error));
        },
        
        // 加载最近订单数据
        loadRecentOrders() {
            axios({
                method: 'get',
                url: 'http://localhost:8080/getRecentOrders',
                headers: { 'Content-type': 'application/x-www-form-urlencoded' }
            }).then(response => {
                if (response.data.status === 'success') {
                    this.recentOrders = response.data.dataList || [];
                }
            }).catch(error => console.log(error));
        },
        
        // 初始化图表
        initCharts() {
            this.initResourceChart();
            this.initWordCloud();
        },
        
        // 初始化资源分布图表
        initResourceChart() {
            const chartData = [
                { name: '景区资源', value: this.siteCount },
                { name: '民宿资源', value: this.hotelCount },
                { name: '美食资源', value: this.productCount },
                { name: '活动资源', value: this.activityCount },
                { name: '旅游线路', value: this.lineCount },
                { name: '非遗文化', value: this.ichCount }
            ];
            
            // 简单的柱状图实现
            const chartContainer = document.getElementById('resourceChart');
            if (chartContainer) {
                chartContainer.innerHTML = `
                    <div style="display: flex; flex-direction: column; gap: 10px; padding: 20px;">
                        ${chartData.map(item => `
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <div style="width: 20px; height: 20px; background: #409EFF; border-radius: 4px;"></div>
                                <span style="flex: 1;">${item.name}</span>
                                <span style="font-weight: bold; color: #409EFF;">${item.value}</span>
                            </div>
                        `).join('')}
                    </div>
                `;
            }
        },
        
        // 初始化词云图
        initWordCloud() {
            const wordcloudContainer = document.getElementById('wordcloud');
            if (wordcloudContainer && this.feedbackData && this.feedbackData.length > 0) {
                // 分词处理
                const words = this.feedbackData;
                const wordCount = {};
                words.split(/[\s,，。！？；：""''（）【】]/).forEach(word => {
                    if (word.length > 1 && word.length < 10) {
                        wordCount[word] = (wordCount[word] || 0) + 1;
                    }
                });
                
                const sortedWords = Object.entries(wordCount)
                    .sort((a, b) => b[1] - a[1])
                    .slice(0, 50)
                    .map(([name, value]) => ({ name, value }));
                
                if (sortedWords.length === 0) {
                    wordcloudContainer.innerHTML = '<div style="text-align: center; padding: 50px; color: #999;">暂无有效反馈数据</div>';
                    return;
                }
                
                // 初始化ECharts实例
                const myChart = echarts.init(wordcloudContainer);
                
                // 配置词云选项
                const option = {
                    backgroundColor: 'transparent',
                    tooltip: {
                        show: true,
                        formatter: function(params) {
                            return `${params.name}: ${params.value}次`;
                        }
                    },
                    series: [{
                        type: 'wordCloud',
                        gridSize: 2,
                        sizeRange: [12, 50],
                        rotationRange: [-90, 90],
                        shape: 'pentagon',
                        width: '100%',
                        height: '100%',
                        textStyle: {
                            fontFamily: 'sans-serif',
                            fontWeight: 'bold',
                            color: function () {
                                const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#9C27B0', '#FF9800', '#4CAF50', '#00BCD4', '#8BC34A'];
                                return colors[Math.floor(Math.random() * colors.length)];
                            }
                        },
                        emphasis: {
                            focus: 'self',
                            textStyle: {
                                textShadowBlur: 10,
                                textShadowColor: '#333'
                            }
                        },
                        data: sortedWords
                    }]
                };
                
                // 设置配置项并渲染
                myChart.setOption(option);
                
                // 响应式调整
                window.addEventListener('resize', function() {
                    myChart.resize();
                });
                
                // 组件销毁时清理
                this.$once('hook:beforeDestroy', function() {
                    myChart.dispose();
                });
            } else {
                wordcloudContainer.innerHTML = '<div style="text-align: center; padding: 50px; color: #999;">暂无反馈数据</div>';
            }
        }
    }
};
</script>

<style scoped>
.dashboard-container {
    padding: 20px;
    background: #f5f7fa;
    min-height: 100vh;
}

.dashboard-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
}

.dashboard-header h1 {
    font-size: 2.5rem;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.dashboard-header p {
    font-size: 1.1rem;
    margin: 0;
    opacity: 0.9;
}

.stats-row {
    margin-bottom: 20px;
}

.charts-row {
        margin-bottom: 20px;
    }

.stat-card {
    height: 120px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-content {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 20px;
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    font-size: 24px;
    color: white;
}

.stat-icon.sites {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.hotels {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-icon.products {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

.stat-icon.activities {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.stat-icon.lines {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.ich {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

.stat-icon.users {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-icon.announcements {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-info {
    flex: 1;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
    line-height: 1;
}

.stat-label {
    font-size: 1rem;
    color: #666;
    font-weight: 500;
}

.chart-card {
    height: 400px;
}

.chart-container {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wordcloud-container {
    height: 300px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

#wordcloud {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.orders-container {
    height: 300px;
    overflow-y: auto;
}

.order-list {
    padding: 10px;
}

.order-item {
    border-bottom: 1px solid #f0f0f0;
    padding: 12px 0;
    transition: background-color 0.3s ease;
}

.order-item:hover {
    background-color: #f8f9fa;
}

.order-item:last-child {
    border-bottom: none;
}

.order-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-user {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.order-type {
    color: #409EFF;
    font-size: 13px;
    font-weight: 500;
}

.order-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #666;
}

.order-num {
    color: #999;
}

.order-price {
    color: #E6A23C;
    font-weight: 600;
}

.order-date {
    font-size: 11px;
    color: #999;
}

.no-orders {
    text-align: center;
    color: #999;
    padding: 40px 0;
    font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .stat-card {
        height: 100px;
    }

    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
        margin-right: 15px;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .stat-label {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .dashboard-container {
        padding: 10px;
    }
    
    .dashboard-header h1 {
        font-size: 2rem;
    }
    
    .dashboard-header p {
        font-size: 1rem;
    }
    
    .stats-row .el-col {
        margin-bottom: 15px;
    }
    
    .stat-card {
        height: 90px;
    }
    
    .stat-content {
        padding: 15px;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
        margin-right: 10px;
    }
    
    .stat-number {
        font-size: 1.8rem;
    }
    
    .stat-label {
        font-size: 0.8rem;
    }
    
    .chart-card {
        height: 350px;
    }
    
    .chart-container,
    .wordcloud-container {
        height: 250px;
    }
}

@media (max-width: 480px) {
    .dashboard-header {
        padding: 15px;
    }
    
    .dashboard-header h1 {
        font-size: 1.5rem;
    }
    
    .dashboard-header p {
        font-size: 0.9rem;
    }
    
    .stat-card {
        height: 80px;
    }
    
    .stat-content {
        padding: 10px;
    }
    
    .stat-icon {
        width: 35px;
        height: 35px;
        font-size: 16px;
        margin-right: 8px;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .stat-label {
        font-size: 0.75rem;
    }
}
</style>
